<template>
    <div>
        <div class="index">
            <div class="w1">
                <!-- <span v-for="i in nalist" :key="i" :style="[{color: na == i?'#00c3ff':''},{borderBottom: na == i?'3px solid #00c3ff':''}]">{{i}}</span> -->
                <div class="w1_1">
                    <p>隐私设置</p>
                </div>
                <!-- <div class="w1_2">
                    <p>创建合集</p>
                    <p>排序</p>
                </div> -->
            </div>
            <div class="w2">
                <div class="w2_1" v-for="it,i in Privacysettings" :key="i">
                    <div class="w2_1_1">
                        <p>{{it.title}}</p>
                    </div>
                    <div class="w2_1_2">
                        <input type="radio" :name="it.name" :value="it.radio" checked><label>是</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" :name="it.name" :value="it.radio"><label>否</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            the_data1: ['222'],
            Privacysettings: [
                {title: '在个人中心展示我发布的帖子', radio: '1', name: 'radios1'},
                {title: '在个人中心展示我的评论', radio: '2', name: 'radios2'},
                {title: '在个人中心展示我的收藏', radio: '3', name: 'radios3'},
                {title: '上传图片时添加水印', radio: '4', name: 'radios4'},
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        
    }
}
</script>

<style lang="less" scoped>
    a {
        color: #999;
        text-decoration: none;
    }
    .index {
        .w1 {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            .w1_1 {
                // border: 1px solid red;
                margin-left: 20px;
            }
            // .w1_2 {
            //     // border: 1px solid red;
            //     display: flex;
            //     margin-right: 20px;
            //     p:nth-last-child(2) {
            //         border: 1px solid #00c3ff;
            //         color: #00c3ff;
            //         height: 20px;
            //         font-size: 15px;
            //         width: 80px;
            //         text-align: center;
            //         border-radius: 5px;
            //         margin-right: 30px;
            //         cursor: pointer;
            //     }
            //     p:nth-last-child(1) {
            //         border: 1px solid #999;
            //         height: 20px;
            //         font-size: 15px;
            //         width: 50px;
            //         text-align: center;
            //         border-radius: 5px;
            //         cursor: pointer;
            //     }
            // }
        }
        .w2 {
            // border: 1px solid red;
            padding: 20px;
            .w2_1 {
                // border: 1px solid red;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .w2_1_1 {
                    font-size: 13px;
                }
            }
        }
    }
</style>